<script setup>
import { ref, computed } from 'vue'
/* vuex */
import { useStore } from 'vuex'
import Logout from '@/views/Chat/components/NavBar/components/Logout.vue'
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()
const store = useStore()
/* 取用户头像 */
const userInfo = computed(() => {
    return store.getters.loginUserInfo
})
const logout = ref(null)
const drawer = ref(false)
// const radio1 = ref('EN')
// const change = ()=>{
//     locale.value=radio1.value
//     console.log(locale )
// }
</script>
<template>
  <div class="my_container_h5 fill_div flex_col">
    <div class="flex_row gap_20px" style=" padding: 40px;">
      <el-avatar :src="userInfo.avatarurl" :size="150" @click="isShowUserInfoCard = true">
      </el-avatar>
      <div class="flex_1 padding_20px flex_col f_a_sa f_j_sa">
        <div class="nickName">
          {{ userInfo.nickname||`${$t('close')}` }}
        </div>
        <div class="tips_txt">
          ID：{{ userInfo.hxId||'未知用户' }}
        </div>

      </div>
    </div>
    <div class="flex_1 my_container_h5_btnGroup flex_col f_j_end">
      <!-- 切换语言 -->
      <div class="func_item flex_row f_a_center gap_20px" @click="drawer = true">
        <span class="settting_fun_icon">
          <svg width="50" height="50" viewBox="0 0 27 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.91406 3.19434H25.2559C25.5436 3.19434 25.7848 3.09701 25.9795 2.90234C26.1826 2.70768 26.2842 2.46647 26.2842 2.17871C26.2842 1.89095 26.1826 1.64974 25.9795 1.45508C25.7848 1.25195 25.5436 1.15039 25.2559 1.15039H7.91406C7.6263 1.15039 7.38086 1.25195 7.17773 1.45508C6.98307 1.64974 6.88574 1.89095 6.88574 2.17871C6.88574 2.46647 6.98307 2.70768 7.17773 2.90234C7.38086 3.09701 7.6263 3.19434 7.91406 3.19434ZM7.91406 10.875H25.2559C25.5436 10.875 25.7848 10.7777 25.9795 10.583C26.1826 10.3799 26.2842 10.1344 26.2842 9.84668C26.2842 9.55892 26.1826 9.31771 25.9795 9.12305C25.7848 8.92839 25.5436 8.83105 25.2559 8.83105H7.91406C7.6263 8.83105 7.38086 8.92839 7.17773 9.12305C6.98307 9.31771 6.88574 9.55892 6.88574 9.84668C6.88574 10.1344 6.98307 10.3799 7.17773 10.583C7.38086 10.7777 7.6263 10.875 7.91406 10.875ZM7.91406 18.543H25.2559C25.5436 18.543 25.7848 18.4456 25.9795 18.251C26.1826 18.0563 26.2842 17.8151 26.2842 17.5273C26.2842 17.2396 26.1826 16.9984 25.9795 16.8037C25.7848 16.6006 25.5436 16.499 25.2559 16.499H7.91406C7.6263 16.499 7.38086 16.6006 7.17773 16.8037C6.98307 16.9984 6.88574 17.2396 6.88574 17.5273C6.88574 17.8151 6.98307 18.0563 7.17773 18.251C7.38086 18.4456 7.6263 18.543 7.91406 18.543ZM2.30273 3.76562C2.74284 3.76562 3.11947 3.61328 3.43262 3.30859C3.74577 2.99544 3.90234 2.61882 3.90234 2.17871C3.90234 1.73014 3.74577 1.35352 3.43262 1.04883C3.11947 0.735677 2.74284 0.579102 2.30273 0.579102C1.86263 0.579102 1.486 0.735677 1.17285 1.04883C0.859701 1.35352 0.703125 1.73014 0.703125 2.17871C0.703125 2.61882 0.859701 2.99544 1.17285 3.30859C1.486 3.61328 1.86263 3.76562 2.30273 3.76562ZM2.30273 11.4463C2.74284 11.4463 3.11947 11.2897 3.43262 10.9766C3.74577 10.6634 3.90234 10.2868 3.90234 9.84668C3.90234 9.40658 3.74577 9.02995 3.43262 8.7168C3.11947 8.40365 2.74284 8.24707 2.30273 8.24707C1.86263 8.24707 1.486 8.40365 1.17285 8.7168C0.859701 9.02995 0.703125 9.40658 0.703125 9.84668C0.703125 10.2868 0.859701 10.6634 1.17285 10.9766C1.486 11.2897 1.86263 11.4463 2.30273 11.4463ZM2.30273 19.127C2.74284 19.127 3.11947 18.9704 3.43262 18.6572C3.74577 18.3441 3.90234 17.9674 3.90234 17.5273C3.90234 17.0788 3.74577 16.7021 3.43262 16.3975C3.11947 16.0843 2.74284 15.9277 2.30273 15.9277C1.86263 15.9277 1.486 16.0843 1.17285 16.3975C0.859701 16.7021 0.703125 17.0788 0.703125 17.5273C0.703125 17.9674 0.859701 18.3441 1.17285 18.6572C1.486 18.9704 1.86263 19.127 2.30273 19.127Z" fill="#8E8E8E" />
          </svg>
        </span>
        <span class="setting_fun_text">{{$t('language')}}</span>
      </div>

      <!-- 退出登陆 -->
      <!-- <div class="func_item flex_row f_a_center gap_20px" @click="logout.dialogVisible = true">
        <span class="settting_fun_icon">
          <svg width="50" height="50" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.02125 4.18042C3.90653 5.49657 2.5 7.84403 2.5 10.5156C2.5 14.6507 5.85404 18 9.99496 18C14.1359 18 17.4899 14.6507 17.4899 10.5156C17.4899 7.85386 16.0932 5.51621 13.9982 4.19024" stroke="#333333" stroke-width="1.4" stroke-miterlimit="10" stroke-linecap="round" />
            <path d="M10.054 2V8.87542" stroke="#333333" stroke-width="1.4" stroke-miterlimit="10" stroke-linecap="round" />
          </svg>
        </span>
        <span class="setting_fun_text">{{$t('close')}}</span>
      </div> -->
    </div>
  </div>
  <Logout ref="logout" />
  <el-drawer v-model="drawer" title="" direction="btt" >
    <el-radio-group v-model="locale" class="flex_col fill_height">
      <el-radio value="EN" label="EN" size="large" class="flex_1">English</el-radio>
      <el-radio value="BR" label="BR" size="large" class="flex_1">Brazil</el-radio>
    </el-radio-group>
  </el-drawer>
</template>
<style lang="scss" scoped>
.my_container_h5 {
    background: #fff;

    .nickName {
        font-size: 60px;
    }
    .my_container_h5_btnGroup {
        padding: 40px 0;
        .func_item {
            background: #f2f2f2;
            padding: 40px;
            height: 120px;
        }
    }
}
</style>